<template>
  <el-dialog style="top: 10%" v-model="visible" :title="$t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="processState" label="处理状态">
            <el-tag v-if="dataForm.processState !== 1" type="danger">未处理</el-tag>
            <el-tag v-else type="success">已处理</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="companyName" label="公司名称">
            {{ dataForm.companyName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="mobileStatus" label="电话状态">
            <el-tag v-if="dataForm.mobileStatus == 'NORMAL'" type="success">正常</el-tag>
            <el-tag v-else-if="dataForm.mobileStatus == 'SHUTDOWN'" type="info">停机</el-tag>
            <el-tag v-else-if="dataForm.mobileStatus == 'POWER_OFF'" type="info">关机</el-tag>
            <el-tag v-else-if="dataForm.mobileStatus == 'SUSPECTED_POWER_OFF'" type="info">疑似关机</el-tag>
            <el-tag v-else-if="dataForm.mobileStatus == 'BUSY'" type="info">忙</el-tag>
            <el-tag v-else-if="dataForm.mobileStatus == 'UNKNOWN'" type="warning">未知</el-tag>
            <el-tag v-else-if="dataForm.mobileStatus == 'NOT_EXIST'" type="danger">空号</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item prop="mobileStatusRunTime" label="电话状态更新时间" label-width="130px">
            {{ dataForm.mobileStatusRunTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="name" label="姓名">
            <el-input v-model="dataForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="mobile" label="手机号">
            {{ dataForm.mobile }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item prop="position" label="职位">
            <el-input v-model="dataForm.position" placeholder="请输入职位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="email" label="邮箱">
            <el-input v-model="dataForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item prop="regLocation" label="地址">
            <el-input v-model="dataForm.regLocation" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-for="(item, index) in dataForm.demandList" :key="index">
        <el-col :span="22">
          <el-form-item prop="item.demand" label="采购意向">
            <el-input v-model="item.demand" placeholder="请输入采购意向"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <div style="padding: 7px 5px;">
            <img src="../../assets/images/add.jpg" alt="" @click="addDemand" style="margin-right: 15px;">
            <img v-if="dataForm.demandList.length != 1 || dataForm.demandList[0].demand != ''" src="../../assets/images/delete2.jpg" alt="" @click="removeDemand(index)">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="沟通结果" prop="connected">
            <el-radio-group v-model="dataForm.connected">
              <el-radio :label="1">已接通</el-radio>
              <el-radio :label="0">未接通</el-radio>
              <el-radio :label="2">无效</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="remark" label="沟通备注">
            <el-input v-model="dataForm.remark" placeholder="请输入沟通备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle(false)">保存,退出</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle(true)">保存,下一条</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {nextTick, reactive, ref, watch} from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);
const visible = ref(false);
const dataFormRef = ref();
import { useRoute, useRouter } from "vue-router";
// 在 <script setup> 中追加
interface QueryParams {
  cid?: string;
  ccompanyName?: string;
  cmobile?: string;
  cprocessState?: string;
  cconnected?: string;
  cbelongerName?: string;
  cuserName?: string;
  cisDemand?: string;
  cdemand?: string;
  cmobileStatus?: string;
  startDate?: string;
  endDate?: string;
}
let queryCache = reactive<QueryParams>({}); // 用来保存父页面传过来的筛选条件

const router = useRouter();
const route = useRoute();
const dataForm = reactive({
  id: "" as any,
  companyId: "", //公司
  companyName: "", //公司
  name: "", //姓名
  mobile: "", //联系电话
  email: "", //邮箱
  position: "", //职位
  processState: "", // 处理状态
  mobileStatus: "", // 电话状态
  mobileStatusRunTime: "", // 电话状态查询时间
  mobileOperator: "", // 运营商
  connected: null, // 沟通结果
  regLocation: "",
  prod: "",
  remark: "",
  demandList: [{
    id: "" as any,
    companyId: "",
    employeeId: "" as any,
    demand: ""
  }]
});

const rules = ref({});

const init = (id?: number, query?: QueryParams) => {
  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }
  visible.value = true;
  dataForm.id = id;
  // 缓存查询条件
  Object.assign(queryCache, query || {});
  nextTick(() => {
    getInfo(id);
  });
};

// 获取信息
const getInfo = (id?: number) => {
  if (!id) {
    return;
  }
  baseService.get(`/noc/companyemployee/info/unprocess/${id}`).then((res) => {
    if (res.data.demandList.length == 0) {
      res.data.demandList.push({ id: '', companyId: dataForm.companyId, employeeId: dataForm.id, demand: '' })
    }
    Object.assign(dataForm, res.data);
    dataForm.connected = null;
    console.log(dataForm);
  });
};

// 表单提交
const dataFormSubmitHandle = (nextFlag?: boolean) => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    // 合并额外参数
    const params = {
      nextFlag: nextFlag,
      ...queryCache,
      ...dataForm // 这里一次性把 cid、keyword、cStatus、cUpdaterName、cProd 带过去
    };
    console.log(params)
    baseService.post("/noc/companyemployee/save/process", params).then((res) => {
      if (res.code === 0) {
        emit("refreshDataList");
        if (nextFlag) {
          ElMessage.success("保存成功");
          Object.assign(dataForm, res.data);
          if (res.data.demandList.length == 0) {
            res.data.demandList.push({ id: '', companyId: res.data.companyId, employeeId: res.data.id, demand: '' })
          }
          dataForm.connected = null;
        } else {
          ElMessage.success({
            message: t("prompt.success"),
            duration: 500,
            onClose: () => {
              visible.value = false;
            }
          });
        }
      }
    });
  });
};

const addDemand = () => {
  dataForm.demandList.push({ id: '', companyId: dataForm.companyId, employeeId: dataForm.id, demand: '' });
};

// 删除指定索引的型号输入框
const removeDemand = (index: any) => {
  if (dataForm.demandList.length <= 1) {
    dataForm.demandList[0].demand = ''
    return;
  }
  dataForm.demandList.splice(index, 1);
};

defineExpose({
  init
});
</script>
